<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Message Box</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="msg-header">
            <div class="msg-header-img">
                <img src="user1.jpg" alt="" srcset="">
                <div class="active">
                    <h4>John Lewis</h4>
                    <h6>3 hours ago...</h6>
                </div>
            </div>
            <div class="header-icons">
                <i class="fa fa-phone" ></i>
                <i class="fa fa-video-camera" ></i>
                <i class="fa fa-info-circle" ></i>
            </div>
        </div>
        <div class="chat-page">
            <div class="msg-inbox">
                <div class="chats">
                    <div class="msg-page">
                        <div class="received-chats">
                            <div class="received-chats-img">
                                <img src="user2.jpg"/>
                            </div>
                            <div class="received-msg">
                                <div class="received-msg-inbox">
                                    <p>Hi !! This is message from John Lewis</p>
                                    <span class="time">11:01 PM | Ocober 12</span>
                                </div>
                            </div>
                        </div>

                        <div class="outgoing-chats">
                            <div class="outgoing-chats-msg">
                                    <p>Hi !! This is message from John Lewis</p>
                                    <span class="time">11:01 PM | Ocober 12</span>
                                </div>
                                <div class="outgoing-chats-img">
                                    <img src="user1.jpg" /> 
                                </div>  
                        </div>   
                        <div class="received-chats">
                            <div class="received-chats-img">
                                <img src="user2.jpg"/>
                            </div>
                            <div class="received-msg">
                                <div class="received-msg-inbox">
                                    <p>Hi !! This is 2nd message from John Lewis</p>
                                    <span class="time">11:01 PM | Ocober 12</span>
                                </div>
                            </div>
                        </div>

                        <div class="outgoing-chats">
                            <div class="outgoing-chats-msg">
                                    <p>Hi !! This is 2nd message from John Lewis</p>
                                    <span class="time">11:01 PM | Ocober 12</span>
                                </div>
                                <div class="outgoing-chats-img">
                                    <img src="user1.jpg" /> 
                                </div>  
                        </div> 
                        <div class="received-chats">
                            <div class="received-chats-img">
                                <img src="user2.jpg"/>
                            </div>
                            <div class="received-msg">
                                <div class="received-msg-inbox">
                                    <p>Hi !! This is 2nd message from John Lewis</p>
                                    <span class="time">11:01 PM | Ocober 12</span>
                                </div>
                            </div>
                        </div>                                                                    
                    </div>
                </div>       
            </div>
            <div class="msg-bottom">
                <div class="bottom-icons">
                    <i class="fa fa-plus-circle"></i>
                    <i class="fa fa-camera"></i>
                    <i class="fa fa-microphone"></i>
                    <i class="fa fa-smile-o"></i>
                </div>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="write message..">
                    <div class="input-group-addpend">
                        <span class="input-group-text">
                            <i class="fa fa-paper-plane"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>